<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Circle</title>
    <script type="text/javascript" src="../doc/asset/js/esl/esl.js"></script>
</head>
<body>
    <script type="text/javascript">
    require.config({
        packages: [
            {
                name: 'zrender',
                location: '../src',
                main: 'zrender'
            }
        ]
    });
    require(
        [
            "zrender",
            'zrender/graphic/shape/Circle'
        ], 
        function(zrender, CircleShape){
            // 初始化zrender
            var zr = zrender.init(document.getElementById("Main"), {
                renderer: 'svg'
            });

            var k = 0;
            for (var i = 0; i < 10; i++) {
                for (var j = 0; j < 10; j++) {
                    var circle = new CircleShape({
                        position: [j * 50, i * 50],
                        scale: [1, 1],
                        shape: {
                            cx: 50,
                            cy: 50,
                            r: k++ / 2
                        },
                        style: {
                            fill: 'rgb(33, 222, 10)'
                        }
                    });
                    zr.addElement(circle);
                }
            }
        })
    </script>
    <div id="Main" style="width:600px;height:400px;"></div>
</body>
</html>